    <template>
      <div class="my-tab-bar">
        <div class="tab-item" v-for="(i,e) in data" :key="e+1" >
          <!-- 图标 -->
          <span :class="i.iconTex"></span>
          <!-- 文字 -->
          <span @click="add(i.componentName)">{{i.text}}</span>
        </div>
      </div>
    </template>

    <script>
    export default {
     props:{
        data:{
            type:Array,
            required:true
        }
     },
     methods:{
      add(i){
        location.href="#/"+i
      }
     }
    }
    </script>

    <style lang="less" scoped>
    .my-tab-bar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: white;
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .current {
      color: #1d7bff;
    }
    </style>